import React, { useState } from 'react';
import { Input, Message, Form, Divider, Checkbox, Loading } from '@alifd/next';
import styles from './index.module.scss';
import { login, LoginPrams } from '../../service';
import { useRequest, useHistory, Link } from 'ice';

const { Item } = Form;

export interface IDataSource {
  name: string;
  password: string;
  autoLogin: boolean;
}
const DEFAULT_DATA: IDataSource = {
  name: 'admin@qq.com',
  // eslint-disable-next-line @iceworks/best-practices/no-secret-info
  password: '123456',
  autoLogin: true,
};

interface LoginProps {}

const LoginBlock: React.FunctionComponent<LoginProps> = (): JSX.Element => {
  const [postData, setValue] = useState(DEFAULT_DATA);
  const history = useHistory();

  const onSuccess = (data: string, params: LoginPrams[]) => {
    const { autoLogin } = params[0];
    sessionStorage.clear();
    localStorage.clear();
    sessionStorage.setItem('token', data);
    if (autoLogin) {
      localStorage.setItem('token', data);
    }
    history.replace('/home');
    window.location.reload();
    Message.success('登录成功');
  };

  const onError = (e: Error, params: LoginPrams[]) => {
    // Message.error(e.message);
  };

  const { loading, request } = useRequest<string, LoginPrams[]>(login, {
    defaultParams: [{}],
    debounceInterval: 300,
    onSuccess,
    onError,
  });

  const formChange = (values: IDataSource) => {
    setValue(values);
  };

  const handleSubmit = (values: IDataSource, errors: []) => {
    if (errors) {
      return;
    }
    const loginParams: LoginPrams = {
      email: values.name,
      password: values.password,
      autoLogin: values.autoLogin,
    };
    request(loginParams);
  };
  return (
    <div className={styles.LoginBlock}>
      <div className={styles.innerBlock}>
        <a href="#">
          <img
            className={styles.logo}
            src="https://img.alicdn.com/tfs/TB1KtN6mKH2gK0jSZJnXXaT1FXa-1014-200.png"
            alt="logo"
          />
        </a>
        <div className={styles.desc}>
          <span className={styles.active}>账户密码登录</span>
        </div>
        <Loading visible={loading}>
          <Form value={postData} onChange={formChange} size="large">
            <Item required requiredMessage="用户名为必填项">
              <Input name="name" maxLength={128} placeholder="用户名" />
            </Item>
            <Item required requiredMessage="密码为必填项" style={{ marginBottom: 0 }}>
              <Input.Password name="password" htmlType="password" placeholder="密码" />
            </Item>

            <div className={styles.infoLine}>
              <Item style={{ marginBottom: 0 }}>
                <Checkbox name="autoLogin" className={styles.infoLeft}>
                  自动登录
                </Checkbox>
              </Item>
              <div>
                <Link to="/" className={styles.link}>
                  忘记密码
                </Link>
              </div>
            </div>

            <Item style={{ marginBottom: 10 }}>
              <Form.Submit type="primary" onClick={handleSubmit} className={styles.submitBtn} validate>
                登录
              </Form.Submit>
            </Item>
          </Form>
        </Loading>
      </div>
    </div>
  );
};

export default LoginBlock;
